@media screen {
  body{
    font-size: 16px;
  };
  @media(max-width: 600px){
    body{
      background-color: pink;
    }
  }
  @media(max-width: 1024px){
    body{
      background-color: blue;
    }
  }
}
//媒体查询第2种写法
.box{
  width: 1000px;
  height: 399px;
  margin: 10px auto;
  background-color:red;
  @media (max-width:1024px){
  background: green;
    }
  @media (max-width:640px){
    background: #ff9900;
  }
}
//第三种写法 定义变量 变量的特殊用法
@max640:~"(max-width:640px)";
@max1024:~"(max-width:1024px)";
.container{
  width: 1000px;
  height: 400px;
  margin: 10px auto;
  @media @max640{
    background: blue;
  }
  @media @max1024{
    background: yellow;
  }
}